<!--
 * @Author: your name
 * @Date: 2021-05-12 22:01:33
 * @LastEditTime: 2021-06-26 15:35:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hairdressing_web\src\pages\sales\aaa.vue
-->
<template>
  <view class="c-pt40">
    <view class="card">
      <view class="card-title">退款的商品</view>
      <view class="c-flex">
        <view class="imgBox">
          <image :src="goodsDetilData.productPic" mode="" />
        </view>
        <view class="c-flex c-flex-column rightInfor c-flex-between">
          <view>{{ goodsDetilData.productName }}</view>
          <view class="c-flex c-flex-between">
            <view>{{ goodsDetilData.skuName }}</view>
            <view>×{{ goodsDetilData.productCount }}</view>
          </view>
          <view>￥{{ goodsDetilData.originalSumPrice }}</view>
        </view>
      </view>
    </view>
    <view class="cell">
      <u-cell-group title="选择服务类型" :title-style="{color: '#2A2A2A', fontWeight: '600'}">
        <u-cell-item
          title="我要退款（无需退货）"
          :arrow="true"
          label="没收到货，或与卖家协商同意不用退货只退款"
          @click.native="tuikuan"
        >
          <view slot="icon" class="iconBox">
            <image src="/static/image/tuikuan.png" mode="" />
          </view>
        </u-cell-item>
        <u-cell-item title="我要退货退款" :arrow="true" label="已收到货，需要退还还收到的货物" @click.native="tuihuo">
          <view slot="icon" class="iconBox">
            <image src="/static/image/tuihuo.png" mode="" />
          </view>
        </u-cell-item>
      </u-cell-group>
    </view>
  </view>
</template>
<script>
import order from '@/services/order'
export default {
  data() {
    return {
      id: '',
      status: '',
      orderid: '',
      goodsDetilData: '',
      type: ''
    }
  },
  onLoad(option) {
    wx.removeStorageSync('causeText')
    if (option.id) this.id = option.id
    if (option.orderid) this.orderid = option.orderid
    if (option.status) this.status = option.status
    if (option.type) this.type = option.type
    order.info(this.orderid).then(({data}) => {
      let orderDetailList = data.orderDetailList
      let goodsInfo = orderDetailList.find(i => i.id == this.id)
      if (!!goodsInfo) this.goodsDetilData = goodsInfo
    })
  },
  methods: {
    tuikuan() {
      if (this.status == 2) {
        wx.navigateTo({
          url:
            '/pages/sales/RequestSales?id=' +
            this.id +
            '&status=' +
            this.status +
            '&orderid=' +
            this.orderid +
            '&type=tuikuan'
        })
      } else {
        wx.showToast({
          title: '该状态下无法仅退款',
          icon: 'none',
          duration: 2000
        })
      }
    },
    tuihuo() {
      if (this.status == 3 || this.status == 4) {
        wx.navigateTo({
          url:
            '/pages/sales/RequestSales?id=' +
            this.id +
            '&status=' +
            this.status +
            '&orderid=' +
            this.orderid +
            '&type=tuihuo'
        })
      } else {
        wx.showToast({
          title: '该状态下无法退货退款',
          icon: 'none',
          duration: 2000
        })
      }
      // if (this.status == 3) {
      // } else {
      //   wx.showToast({
      //     title: '该状态下无法退货退款',
      //     icon: 'none',
      //     duration: 2000
      //   })
      // }
    }
  }
}
</script>
<style lang="scss">
.card {
  margin-top: 30rpx;
  box-sizing: border-box;
  box-shadow: 0px 0px 48rpx 0px rgba(15, 15, 15, 0.22);
  border-radius: 15rpx;
  padding: 30rpx 45rpx;
  margin: 0 auto;
  width: 93%;

  .card-title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #2b2b2b;
    margin-bottom: 30rpx;
  }
  .imgBox {
    width: 190rpx;
    border-radius: 10rpx;
    height: 190rpx;
    margin-right: 15rpx;
  }
  .rightInfor {
    > view {
      font-family: PingFang SC;
      font-weight: 500;
      &:first-of-type {
        color: #2b2b2b;
        font-size: 27rpx;
      }
      &:nth-of-type(2) {
        color: #939393;
        font-size: 23rpx;
      }
      &:nth-of-type(3) {
        color: #ff6a21;
        font-weight: 600;
        font-size: 27rpx;
      }
    }
  }
}
.cell {
  .iconBox {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 52rpx;
      height: 52rpx;
    }
  }
}
image {
  width: 190rpx;
  height: 190rpx;
}
</style>
